<script setup>
import { ref } from 'vue'


const students = ref([])
//选择查询类型
const type = ref('姓名')
const tmpType = ref('姓名')
const types = ref([
  {
    "id": 1,
    "typeName":"姓名"
  },{
    "id": 2,
    "typeName":"学号"
  },{
    "id": 3,
    "typeName":"班级"
  }])

const content = ref('')
const tmpContent = ref('')

//分页条数据
const pageNum = ref(1)//当前页
const total = ref(0)//总条数
const pageSize = ref(5)//每页条数

//回显帖子列表
import {studentsService, studentsDelete, studentsAdd} from '@/api/post.js'

const studentList = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    name: type.value === "姓名" ? content.value : null,
    id: type.value === "学号" ? content.value : null,
    stuClass: type.value === "班级" ? content.value : null
  }
  let result = await studentsService(params);

  total.value = result.data.total;
  students.value = students.value.concat(result.data.items);
}

const deleteStudent = async (id) => {
  let params = {
    id: id
  }
  await studentsDelete(params);
  students.value = [];
  studentList();
}

const initStudentList = () => {
  students.value = [];
  type.value = tmpType.value;
  content.value = tmpContent.value;
  pageNum.value = 1;
  studentList()
}
//初始化帖子列表
initStudentList()

const handlePageChange = (newPage) => {
  if (newPage <= 0) {
    pageNum.value = 1;
  } else if (newPage > Math.ceil(total.value / pageSize.value)) {
    pageNum.value = Math.ceil(total.value / pageSize.value);
  } else {
    pageNum.value = newPage;
  }
  students.value = [];
  studentList();
}

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  pageNum.value = 1; // 重置到第一页
  students.value = [];
  studentList();
}

const dialogVisible = ref(false);
const newStudent = ref({
  student_number: '',
  name: '',
  password: '',
  stuclass: '',
  email: '' // 新增邮箱字段
});

const openDialog = () => {
  dialogVisible.value = true;
}

const closeDialog = () => {
  dialogVisible.value = false;
}

const submitStudent = async () => {
  let params = {
    student_number: newStudent.value.student_number,
    name: newStudent.value.name,
    password: newStudent.value.password,
    stuclass: newStudent.value.stuclass,
    email: newStudent.value.email
  }
  await studentsAdd(params);
  dialogVisible.value = false;
  students.value = [];
  studentList();
}

</script>

<template>
  <el-dialog v-model="dialogVisible" title="添加学生">
    <el-form>
      <el-form-item label="学号">
        <el-input v-model="newStudent.student_number"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="newStudent.name"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="newStudent.password"></el-input>
      </el-form-item>
      <el-form-item label="班级">
        <el-input v-model="newStudent.stuclass"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="newStudent.email"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submitStudent">提交</el-button>
      </div>
    </template>
  </el-dialog>

  <el-card class="container">
    <!-- 头部操作区域 -->
    <div class="header-container">
      <el-row :gutter="20" align="middle">
        <!-- 左侧查询条件 -->
        <el-col :span="18">
          <el-space :size="15" style="width: 100%">
            <el-select
                v-model="tmpType"
                placeholder="查询类型"
                style="width: 120px"
                clearable
            >
              <el-option
                  v-for="t in types"
                  :key="t.id"
                  :label="t.typeName"
                  :value="t.typeName"
              />
            </el-select>

            <el-input
                v-model="tmpContent"
                placeholder="请输入查询内容"
                clearable
                style="flex: 1"
                @keyup.enter="initStudentList"
            />

            <el-button type="primary" @click="initStudentList" icon="Search">搜索</el-button>
            <el-button @click="tmpType = '姓名'; tmpContent = ''" icon="Refresh">重置</el-button>
          </el-space>
        </el-col>

        <!-- 右侧操作按钮 -->
        <el-col :span="6" class="right-buttons">
          <el-button
              type="primary"
              @click="openDialog"
              icon="Plus"
              plain
          >
            添加学生
          </el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 数据表格 -->
    <el-table
        :data="students"
        style="width: 100%"
        stripe
        border
        highlight-current-row
    >
      <el-table-column label="学号" width="220" prop="student_number" align="center"></el-table-column>
      <el-table-column label="姓名" width="180" prop="name" align="center"></el-table-column>
      <el-table-column label="班级" prop="stuclass" align="center"></el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template #default="{ row }">
          <el-button
              type="danger"
              @click="deleteStudent(row.id)"
              size="small"
              icon="Delete"
              plain
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-size="pageSize"
          :current-page="pageNum"
          :page-sizes="[5, 10, 20]"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
      />
    </div>
  </el-card>
</template>

<style scoped>
.container {
  margin: 20px;
  min-height: calc(100vh - 40px);
}

.header-container {
  margin-bottom: 20px;
}

.right-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.el-row {
  margin-bottom: 15px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 优化表格样式 */
.el-table {
  margin-top: 15px;
}

/* 对话框按钮间距调整 */
.dialog-footer {
  padding: 20px;
  text-align: right;
  border-top: 1px solid #eee;
}

/* 输入框统一宽度 */
.el-form-item {
  margin-bottom: 18px;
}
</style>